<template>
  <div>
    <!-- 任务奖励设置 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            任务奖励设置
          </el-header>
          <el-header class="headTwo">
            <i class="el-icon-collection-tag"></i> 新手任务
            新手任务每个用户只奖励一次，相关值必须为大于0的整数
          </el-header>
          <el-main
            class="info-main padding-style"
            style="padding-left: 20px; border: 1px solid grey"
          >
            <el-form ref="newWork" :model="newWork" label-width="300px">
              <el-form-item label="新手欢迎奖励" class="centerTitle">
                成长值：
                <el-input v-model="newWork.welcome" style="width: 100px">
                  <i slot="suffix" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="设置头像" class="centerTitle">
                成长值：
                <el-input v-model="newWork.setHead" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="设置昵称" class="centerTitle">
                成长值：
                <el-input v-model="newWork.setName" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="完善个人信息" class="centerTitle">
                成长值：
                <el-input v-model="newWork.compentInfo" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="成功关注1位达人" class="centerTitle">
                成长值：
                <el-input v-model="newWork.attentionOne" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="首次分享商品或专题" class="centerTitle">
                成长值：
                <el-input v-model="newWork.shareFirst" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="首次收藏商品或专题" class="centerTitle">
                成长值：
                <el-input v-model="newWork.collectFirst" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="首次购物成功" class="centerTitle">
                成长值：
                <el-input v-model="newWork.shopFirst" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="首次完成评价" class="centerTitle">
                成长值：
                <el-input v-model="newWork.assessFirst" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
            </el-form>
          </el-main>
          <el-header class="headTwo">
            <i class="el-icon-collection-tag"></i> 日常任务
            日常任务可以奖励多次，相关值必须为大于0的整数
          </el-header>
          <el-main
            class="info-main padding-style"
            style="padding-left: 20px; border: 1px solid grey"
          >
            <el-form
              ref="dayWork"
              :model="dayWork"
              label-width="300px"
              style="border: 1px solid grey"
            >
              <el-form-item label="每日登录" class="centerTitle">
                成长值：
                <el-input v-model="dayWork.login" style="width: 100px">
                  <i slot="suffix" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="每日签到" class="centerTitle">
                成长值：
                <el-input v-model="dayWork.sign" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="分享商品或专题" class="centerTitle">
                成长值：
                <el-input v-model="dayWork.shareGood" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="邀请好友" class="centerTitle">
                成长值：
                <el-input v-model="dayWork.inviteFriend" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="好友首次下单成功" class="centerTitle">
                成长值：
                <el-input
                  v-model="dayWork.friendBuySuccess"
                  style="width: 100px"
                >
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="购买天数达标" class="centerTitle">
                成长值：
                <el-input v-model="dayWork.buyDays" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
              </el-form-item>
            </el-form>
          </el-main>
          <el-header class="headTwo">
            <i class="el-icon-collection-tag"></i> 规则设置
          </el-header>
          <el-main
            class="info-main padding-style"
            style="padding-left: 20px; border: 1px solid grey"
          >
            <el-form
              ref="ruleSet"
              :model="ruleSet"
              label-width="300px"
              style="border: 1px solid grey"
            >
              <el-form-item label="每连续签到" class="centerTitle">
                <el-input v-model="ruleSet.days" style="width: 100px">
                  <i slot="suffix" class="unit">天</i>
                </el-input>
                额外奖励：
                <el-input v-model="ruleSet.exaraReward" style="width: 100px">
                  <i slot="suffix" class="unit">分</i>
                </el-input>
              </el-form-item>
              <el-form-item label="购物消费" class="centerTitle">
                <el-input v-model="ruleSet.shopPay" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">元</i>
                </el-input>
                奖励1分成长值（不含运费）
              </el-form-item>
              <el-form-item label="商品单价低于" class="centerTitle">
                <el-input v-model="ruleSet.goodPrice" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">元</i>
                </el-input>
                评价不送成长值
              </el-form-item>
              <el-form-item label="订单实际支付金额低于" class="centerTitle">
                成长值：
                <el-input v-model="ruleSet.orderPay" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">元</i>
                </el-input>
              </el-form-item>
              <el-form-item label="单件商品最高可获得" class="centerTitle">
                <el-input v-model="ruleSet.singleMax" style="width: 100px">
                  <i slot="suffix" style="font-style:normal" class="unit">分</i>
                </el-input>
                成长值
              </el-form-item>
            </el-form>
          </el-main>
          <el-footer class="info-foot">
            <div class="centerFoot">
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import taskApi from "@/api/user/task";
export default {
  data() {
    return {
      newWork: {
        welcome: "",
        setHead: "",
        setName: "",
        compentInfo: "",
        attentionOne: "",
        shareFirst: "",
        collectFirst: "",
        shopFirst: "",
        assessFirst: ""
      },
      dayWork: {
        login: "",
        sign: "",
        shareGood: "",
        inviteFriend: "",
        friendBuySuccess: "",
        buyDays: ""
      },
      ruleSet: {
        days: "",
        exaraReward: "",
        shopPay: "",
        goodPrice: "",
        orderPay: "",
        singleMax: ""
      }
    }
  },
  methods: {
    initData(){
      taskApi.getTaskInfo().then(response => {
        var taskData = response.data.data;
        this.newWork.welcome = taskData.welcome;
        this.newWork.setHead = taskData.headPortrait;
        this.newWork.setName = taskData.nickname;
        this.newWork.compentInfo = taskData.personalDetails;
        this.newWork.attentionOne = taskData.firstAttention;
        this.newWork.shareFirst = taskData.firstShare;
        this.newWork.collectFirst = taskData.firstEnshrine;
        this.newWork.shopFirst = taskData.firstShopping;
        this.newWork.assessFirst = taskData.firstEvaluate;
        this.dayWork.login = taskData.login;
        this.dayWork.sign = taskData.signIn;
        this.dayWork.shareGood = taskData.share;
        this.dayWork.inviteFriend = taskData.invite;
        this.dayWork.friendBuySuccess = taskData.friendsFirstOrder;
        this.dayWork.buyDays = taskData.minPurchaseDays;
        this.ruleSet.days = taskData.continuousSignIn;
        this.ruleSet.exaraReward = taskData.continuousSignInExtra;
        this.ruleSet.shopPay = taskData.shoppingConsumption;
        this.ruleSet.goodPrice = taskData.minCommodityPrice;
        this.ruleSet.orderPay = taskData.minActualPayment;
        this.ruleSet.singleMax = taskData.maxSingleCommodity;
      });
    },
    onSubmit() {
      let formData = {
        welcome : this.newWork.welcome,
        headPortrait : this.newWork.setHead,
        nickname : this.newWork.setName,
        personalDetails : this.newWork.compentInfo,
        firstAttention : this.newWork.attentionOne,
        firstShare : this.newWork.shareFirst,
        firstEnshrine : this.newWork.collectFirst,
        firstShopping : this.newWork.shopFirst,
        firstEvaluate : this.newWork.assessFirst,
        login : this.dayWork.login,
        signIn : this.dayWork.sign,
        share : this.dayWork.shareGood,
        invite : this.dayWork.inviteFriend,
        friendsFirstOrder : this.dayWork.friendBuySuccess,
        minPurchaseDays : this.dayWork.buyDays,
        continuousSignIn : this.ruleSet.days,
        continuousSignInExtra : this.ruleSet.exaraReward,
        shoppingConsumption : this.ruleSet.shopPay,
        minCommodityPrice : this.ruleSet.goodPrice,
        minActualPayment : this.ruleSet.orderPay,
        maxSingleCommodity : this.ruleSet.singleMax
      }
      // taskApi.updateTaskInfo(this.newWork.welcome, this.newWork.setHead, this.newWork.setName, this.newWork.compentInfo, this.newWork.attentionOne, 
      // this.newWork.shareFirst, this.newWork.collectFirst, this.newWork.shopFirst, this.newWork.assessFirst, this.dayWork.login,
      //   this.dayWork.sign, this.dayWork.shareGood, this.dayWork.inviteFriend, this.dayWork.friendBuySuccess, this.dayWork.buyDays, this.ruleSet.days,
      //    this.ruleSet.exaraReward, this.ruleSet.shopPay, this.ruleSet.goodPrice, 
      //   this.ruleSet.orderPay, this.ruleSet.singleMax)
        taskApi.updateTaskInfo(formData).then(response => {
        // this.initData();
      });
    }
  },
  mounted () {
    this.initData();
  }
}
</script>
<style scoped>
.headTwo {
  padding-top: 20px;
  padding-left: 40px;
  color: gray;
}
.unit {
  /* text-align: center; */
  color: black;
  background-color: gainsboro;
}
.centerTitle {
  height: 60px;
  /* border: 1px solid grey; */
  text-align: center;
}
.centerFoot {
  text-align: center;
}
</style>
